<template>
  <div class="relative h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200">
    <login-header></login-header>
    <!--    表单-->
    <div class="block px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-8 xl:py-4
        xl:rounded-sm xl:shadow-lg">
      <h3 class="hidden mb-2 font-semibold text-base text-main dark:text-zinc-300 xl:block">账号登录</h3>
      <!--      表单-->
      <vee-form @submit="onLoginHandler">
        <!--        用户名-->
        <vee-field
            class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base
              focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900" type="text" name="username"
            placeholder="用户名" autocomplete="on" :rules="validateUsername" v-model="loginForm.username"/>
        <vee-error-message name="username" class="text-sm text-red-600 block mt-0.5 text-left"></vee-error-message>
        <vee-field
            class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b w-full outline-0 pb-1 px-1 text-base
              focus:border-b-main dark:focus:border-b-zinc-200 xl:default:bg-zinc-900" type="password" name="password"
            placeholder="密码" autocomplete="on" :rules="validatePassword" v-model="loginForm.password"/>
        <vee-error-message name="password" class="text-sm text-red-600 block mt-0.5 text-left"/>
        <!--        跳转按钮-->
        <div class="pt-1 pb-3 leading-[0px] text-right">
          <a class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-600
           dark:hover:text-zinc-400 text-sm duration-300 cursor-pointer" @click="onToRegister">去注册</a>
        </div>
        <!--        登录按钮-->
        <mine-button class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-900"
                     :isActiveAnim="false"
                     :loading="loading">登录
        </mine-button>
      </vee-form>

      <!--      第三方登录 -->
      <div class="flex justify-around mt-4">
        <!--        QQ-->
<!--        <mine-svg-icon class="w-4 cursor-pointer" name="qq"></mine-svg-icon>-->
        <mine-qq-login></mine-qq-login>
        <!--        微信-->
        <mine-wechat-login></mine-wechat-login>
<!--        <mine-svg-icon class="w-4 cursor-pointer" name="wexin"></mine-svg-icon>-->
      </div>
    </div>
    <mine-slider-captcha v-if="isSliderCaptchaVisible" @close="isSliderCaptchaVisible = false"
                         @success="onCaptchaSuccess">
    </mine-slider-captcha>
  </div>
</template>

<script setup>
import LoginHeader from "../components/login-header.vue";
import MineSliderCaptcha from './slider-captcha.vue'
import MineQqLogin from './qq-login.vue'
import MineWechatLogin from './wechat-login.vue'
import {Form as VeeForm, Field as VeeField, ErrorMessage as VeeErrorMessage} from "vee-validate";
import {validateUsername, validatePassword} from "../validate";
import {ref} from "vue";
import {LOGIN_TYPE_USERNAME} from "@/constants";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()
//控制slider-captcha展示
const isSliderCaptchaVisible = ref(null)
// const
const loading = ref(false)
const onLoginHandler = () => {
  //TODO:不开启
  isSliderCaptchaVisible.value = false
  onCaptchaSuccess()
}

// 用户输入的用户名和密码
const loginForm = ref({
  username: '',
  password: ''
})

/**
 * 用户登录行为
 */
const onLogin = async () => {
  loading.value = true
  try {
    await store.dispatch('user/login', {
      ...loginForm.value,
      loginType: LOGIN_TYPE_USERNAME
    })
  } finally {
    loading.value = false
  }
  //移动端下跳转的类型
  await store.commit('app/changeRouterType', 'push')
  await router.push('/')
}
const onCaptchaSuccess = () => {
  isSliderCaptchaVisible.value = false
  //登录操作
  onLogin()
}
const onToRegister = () => {
  router.push('/register')
}

</script>
